<template>
  <div>
    <!-- <ocean :use="buttons"></ocean> -->
    <cards :cards="cards"></cards>
    <n-grid :cols="5" x-gap="20">
      <n-gi :span="2">
        <n-grid :cols="4" x-gap="20" y-gap="20">
          <n-gi v-for="i in 6" :span="2">
            <data-tag style="height:50px;"></data-tag>
          </n-gi>
          <n-gi v-for="i in 5" :span="4">
            <data-tag style="height:50px;"></data-tag>
          </n-gi>
        </n-grid>
      </n-gi>
      <n-gi :span="3">
        <ocean :use="template"></ocean>
      </n-gi>
    </n-grid>
    <ocean :use="dialog"></ocean>
    <ocean :use="drawer"></ocean>
  </div>
</template>

<script setup lang="tsx">

import { useTableTemplate, useDialog, useButton } from '@/ocean/index';
import DataTag from '@/components/dataTag.vue';
import Cards from '@/components/colorCards.vue';

import { reactive, ref } from 'vue';
import Form from './dialog/form1.vue'
import Form2 from './dialog/form2.vue'
import Drawer from '@/ocean/utils/class/Drawer'

let drawer = new Drawer('抽屉', Form2, { width: '800px' });

drawer.button('确认').click(() => {
  let { save } = drawer.getRef()
  save();
  // drawer.close()
})

let buttons = useButton({ type: 'group' });

buttons.button('打开抽屉', { type: 'primary', key: 'edit' }).click(() => {
  drawer.open()
})
buttons.button('删除', { key: 'remove' }).click(() => {
  console.log('hehe')
})


setTimeout(() => {
  buttons.auth(['edit'])
}, 3000)

let cards = [
  { type: 1, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
  { type: 2, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
  { type: 3, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
  { type: 3, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
]

let dialog = useDialog('编辑', Form);

dialog.button('确认').click(() => {
  let { save } = dialog.getRef()
  save();
  dialog.close()
})


let template = useTableTemplate('标签列表', {
  query: (queryData) => {
    console.log(queryData)
    template.table.setData([
      { id: queryData.page + '1', name: Math.random() + '' },
      { id: queryData.page + '2', name: Math.random() + '' },
      { id: queryData.page + '3', name: Math.random() + '' },
      { id: queryData.page + '4', name: Math.random() + '' },
      { id: queryData.page + '5', name: Math.random() + '' },
      { id: queryData.page + '6', name: Math.random() + '' },
      { id: queryData.page + '7', name: Math.random() + '' },
      { id: queryData.page + '8', name: Math.random() + '' },
      { id: queryData.page + '9', name: Math.random() + '' },
      { id: queryData.page + '10', name: Math.random() + '' },
    ]);
    template.pagination.setCount(22)
  },
});

// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')

template.form.setModel({
  name: 'heheda',
  age: 18,
  date: new Date().valueOf(),
  other: '123123123',
  color: '',
})

template.form.item('通过姓名查询', 'name').input();

template.button('添加', { type: 'primary' }).click(() => { console.log('1111') })
template.button('编辑')
template.button('删除')

// template.button('认证',{ type : '', key : '' }).click(()=>{})

template.table.setAttrs({
  rowKey: row => row.id,
  defaultCheckedRowKeys: ['11'],
})

// template.table.column({ type: 'selection' });
template.table.column('ID', 'id');
template.table.column('姓名', 'name');
template.table.column('姓名', 'name');
template.table.column('姓名', 'name');
template.table.column('姓名', 'name');
template.table.column('姓名', 'name');
template.table.column('姓名', 'name');
// template.table.column({
//   render: (row) => <n-button on-click={() => dialog.open({ text: row.name })} >编辑</n-button>
// });

template.query();

</script>
<style>

</style>